<div class="page-total" *ngIf="showTotal">
  {{ ('fui.PAGINATION.TOTAL' | translate) }} {{ totalData }} {{ ('fui.PAGINATION.TOTAL_ROW' | translate) }}
</div>
<div class="page-select" *ngIf="showSize">
  <div>
    {{ 'fui.PAGINATION.PER_PAGE' | translate }}
  </div>
  <fui-select direction="top" [(ngModel)]="pageSize" (ngModelChange)="onPageSizeChange()">
    <fui-select-option *ngFor="let size of sizes" [value]="size">{{size}}</fui-select-option>
  </fui-select>
  <div>
    {{ 'fui.PAGINATION.ROW' | translate }}
  </div>
</div>
<div class="page-nodes">
  <svg  fuiIcon="angle-left" size="sm" color="secondary" class="left-angle" [class.disabled]="getLeftDisabled()" (click)="prev()"></svg>
  <div class="page-node-box" *ngFor="let page of pages">
    <div *ngIf="!isOmit(page)" class="page-node" [class.active]="currentPage === page" (click)="goPage(page)">
      {{ page }}
    </div>
    <div *ngIf="isOmit(page)" class="page-omit">
      ...
    </div>
  </div>
  <svg fuiIcon="angle-right" size="sm" color="secondary" class="right-angle" [class.disabled]="getRightDisabled()" (click)="next()"></svg>
</div>
<div class="page-input" *ngIf="showGoTo">
  <div>
    {{ 'fui.PAGINATION.GO_TO' | translate }}
  </div>
  <input type="number" [(ngModel)]="searchPage" (keyup.enter)="goPage(searchPage)">
  <div>
    {{ 'fui.PAGINATION.GO_TO_PAGE' | translate }}
  </div>
</div>

